<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="/js/axios.min.js"></script>
<script src="/js/util.js"></script>
<script>
    window.onload=function (){
        findByItem(1);
    }
   function findByItem(pageNO){
        axios.get("/user/findByItem",{
            params:{
                pageNO,
                username:$("username").value,
                startDate:$("startDate").value,
                endDate:$("endDate").value
            }
        }).then(resp=>{
            var info = resp.data;
            var str = "";
            info.records.forEach(u=>{
                str+=`<tr><td>${u.username}</td><td>${u.gender}</td><td>${u.salary}</td><td>${u.birthday}</td>
                <td>
                <a href="/update.html?id=${u.id}">修改</a>
                <a href="javascript:del(${u.id})">删除</a>
                </td></tr>`;
            })
            $("userData").innerHTML=str;
            var pageStr = "";
            for (let i = 1; i <= info.pages; i++) {
                pageStr+=`<a href="javascript:findByItem(${i})" style="margin-left: 10px">${i}</a>`;
            }
            $("userCut").innerHTML=pageStr;
        });
   }

   function del(id){

        axios.get("/user/del",{
            params:{
                id,
            }
        }).then(resp=>{
            if (resp.data=="ok"){
               findByItem(1);
            }
        })
   }

</script>
<body>
用户表 <br>
用户名： <input type="text" id="username">
起始日期：<input type="text" id="startDate">
结束日期：<input type="text" id="endDate">
<input type="button" value="查询" onclick="findByItem(1)">
<table width="80%" border="1" cellspacing="1">
    <thead>
    <tr>
        <th>用户名</th>
        <th>性别</th>
        <th>工资</th>
        <th>生日</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="userData"></tbody>
</table>
<div id="userCut"></div>
</body>
<a href="/add.html">添加</a>
</html>